//获取对应的元素节点
var mask = document.querySelector("#mask");
var smallBox = document.querySelector("#smallBox");
var largeBox = document.querySelector("#largeBox");
var lagerImg = document.querySelectorAll("img")[1];

//为遮罩层mask添加鼠标移动事件函数
mask.onmousemove = function (e) {
  var evt = e || window.event;
  var clientX = evt.clientX;
  var clientY = evt.clientY;
  var maskTop = clientY - mask.offsetHeight / 2 - smallBox.offsetTop;
  var maskLeft = clientX - mask.offsetWidth / 2 - smallBox.offsetLeft;
  //上边限制
  if (maskTop < 0) {
    maskTop = 0;
  }
  //左边限制
  if (maskLeft < 0) {
    maskLeft = 0;
  }
  var maxTop = smallBox.offsetHeight - mask.offsetHeight;
  var maxLeft = smallBox.offsetWidth - mask.offsetWidth;
  //下侧边界
  if (maskTop >= maxTop) {
    maskTop = maxTop;
  }
  //右侧边界
  if (maskLeft >= maxLeft) {
    maskLeft = maxLeft;
  }
  mask.style.top = maskTop + "px";
  mask.style.left = maskLeft + "px";
  //比例 ：maskTop/maxTop = lagerTop/maxLagerTop
  var lagerTop = maskTop * (lagerImg.offsetHeight - largeBox.offsetHeight) / maxTop;
  var lagerLeft = maskLeft * (lagerImg.offsetWidth - largeBox.offsetWidth) / maxLeft;
  lagerImg.style.top = -lagerTop + "px";
  lagerImg.style.left = -lagerLeft + "px";
}
//添加鼠标移入的事件函数
smallBox.onmouseenter = function () {
  isExit("block")
}
//添加鼠标移除的事件函数
mask.onmouseleave = function () {
  isExit("none")
}

function isExit(str) {
  mask.style.display = str;
  largeBox.style.display = str;
}